<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-row class="search-input">
                    <el-form-item label="仓库：">
                        <el-input v-model="searchFilters.warehouseCode" placeholder="请输入仓库编码或仓库名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="商品：">
                        <el-input v-model="searchFilters.productId" placeholder="请输入商品编码或商品名称" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="总库存：">
                        <el-col :span="10">
                            <el-input v-model="searchFilters.totalMin" clearable placeholder="总库存(最小值)"></el-input>
                        </el-col>
                        <el-col :span="4" class="text-align">-</el-col>
                        <el-col :span="10">
                            <el-input v-model="searchFilters.totalMax" clearable placeholder="总库存(最大值)"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="可售库存：">
                        <el-col :span="10">
                            <el-input v-model="searchFilters.availableMin" clearable placeholder="可售库存(最小值)"></el-input>
                        </el-col>
                        <el-col :span="4" class="text-align">-</el-col>
                        <el-col :span="10">
                            <el-input v-model="searchFilters.availableMax" clearable placeholder="可售库存(最大值)"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="商家：">
                        <el-select v-model="searchFilters.deptId" placeholder="请选择商家" clearable>
                            <el-option v-for="item in selectedOptionsData1" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <!-- 搜索区域按钮-查询,重置 -->
                <el-row class="search-button">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-row>
                <!-- 导出 -->
                <el-row class="t_r mb20">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="ExcelDownLoad()">导出</el-button>
                    </el-form-item>
                </el-row>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="350" :operationWidth="200" :tableList="tableList" :showDeleteOperation="true" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation="false" :showBatchDelete="false" :showOperation="false" :showSelection="false" :showIndex="false" @findPage="findPage" @handleDelete="handleDelete" @handleDetail="handleDetail" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" @selectionChange="selectionChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import {
    exportExcel
} from "@/utils/excel";

//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        jicTable
    },

    //2.2 数据初始化区
    data() {
        return {
            selections: [], //多选框选中项
            selectedOptionsData1: [], //商家列表数据

            size: "small",
            dataForm: {
                deleteFlag: 0
            }, //表单内容数据
            //2.2.1 公共数据初始化
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [{}], // 表格列表数据
            searchSize: "mini",

            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "name",
                    label: "仓库名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "code",
                    label: "仓库编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "merchantName",
                    label: "商家",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productId",
                    label: "商品编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "productName",
                    label: "商品名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "unitName",
                    label: "主计量单位",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "total",
                    label: "总库存",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "block",
                    label: "冻结库存",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "available",
                    label: "可售库存",
                    minWidth: 100,
                    formatter: null
                }
            ], // 2.2.3 搜索表单对应的数据对象初始化
            searchFilters: {
                name: null,
                code: null,
                type: null,
                status: null,
                productId: null,
                delete_flag: "0"
            },
            dialogVisible: false //// 是否显示弹窗内容;
        }; //return 完结;
    }, //data()方法 完结;

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
        let this_ = this;
        this.utils.request.queryMerchantListOther({}, function (res) {
            if (res.code == "0000") {
                this_.selectedOptionsData1 = res.data;
            }
        });
    },
    //2.3 JavaScript 方法区
    methods: {
        //2.3.1 JavaScript 公共方法区

        //2.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {
                    delete_flag: "0"
                };
            }
            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findMStoreVirtualBalancePage(
                this_.searchFilters,
                function (res) {
                    if (res.code === "0000") {
                        this_.tableList = res.data.rows;
                        this_.totalSize = Number(res.data.total);
                    } else {
                        this_.tableList = [];
                        this_.totalSize = 0;
                    }
                }
            );
        },

        // 3.重置搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 4.详情按钮对应的方法(TODO 需要修改路径)
        handleDetail(params) {
            this.$router.push({
                path: "/pages/Store/MStoreDetail/" + params.row.id
            });
        },

        // 5.请求条数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
            this.findPage();
        },

        // 6.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },

        //==========2.3.1 JavaScript 自定义方法区==========
        //excel导出
        ExcelDownLoad() {
            var this_ = this;
            this.$confirm("确定下载所选数据列表?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let fileName = "虚拟库存表";
                    exportExcel(this_.tableList, this_.tableHeaderList, fileName);
                })
                .catch(() => {});
        },
        //提交表单
        submitForm: function () {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        this.editLoading = true;
                        let params = Object.assign({}, this.dataForm);
                        this.utils.request.saveOrUpdateMStore(params, this.editInfoBack);
                        this.dialogVisible = false;
                    });
                }
            });
        },
        editInfoBack() {
            this.findPage();
        },
        handleDelete(data) {
            this.$confirm("确认删除吗？", "提示", {}).then(() => {
                var params = data.row;
                var this_ = this;
                this.utils.request.deleteMStoreByPrimaryKey(params, function (res) {
                    if (res.code == "0000") {
                        this_.$message({
                            message: "操作成功",
                            type: "success"
                        });
                        this_.findPage(null);
                    } else {
                        this_.$message({
                            message: "操作失败, " + res.msg,
                            type: "error"
                        });
                    }
                });
            });
        },
        // 选中列表中的选项触发
        selectionChange(selections) {
            this.selections = selections.selections;
        },
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}

.text-align {
    text-align: center !important;
}

.page-container {
    padding: 20px 0px 100px;
}
</style>
